Web Font Anti-Pattern: Overusing web fonts

Oc­to­ber 13, 2015

This is my favourite web font anti-pat­tern and one I of­ten get wrong my­self; why are you us­ing web fonts for that? I get it. Web fonts are great. I love them too, but they are overused.

The global av­er­age of font re­quests per page has tripled in the last cou­ple years. It’s great that de­vel­op­ers and de­sign­ers are us­ing more web fonts, but there is a ten­dency to use more web fonts than is rea­son­able. It is now com­mon to see sites load­ing dozens of web fonts.

The av­er­age num­ber of font re­quests per page has in­creased steadily over the past cou­ple of years. From al­most none in 2012 to roughly three fonts per page in 2015. (Source: HTTPArchive)

Every ad­di­tional font comes at a cost. It’ll in­crease your page load times and if you’re re­ly­ing on the browser’s de­fault be­hav­iour it’ll also block your site from ren­der­ing un­til the fonts have loaded. This is largely the rea­son for the re­cent back­lash at web fonts. How­ever, it is not nec­es­sary to use con­tent block­ers for web fonts if they are used with con­sid­er­a­tion and mod­er­a­tion.

It’s per­fectly fine to use web fonts for head­lines and body text. Ide­ally a web site should only use 3-6 fonts per page. More than that should be re­served for ex­cep­tional cases (such as type spec­i­men pages and de­sign web ap­pli­ca­tions). Ex­am­ine your ty­po­graphic hi­er­ar­chy and con­sider us­ing ex­ist­ing fonts be­fore adding a new font.

Using web fonts for lettering

An­other re­cent trend is us­ing web fonts where they’re not ap­pro­pri­ate. Don’t use web fonts if you don’t need them. They’re not the right an­swer for every­thing. If you find your­self wrap­ping each let­ter or word in a span el­e­ment in or­der to style them — stop. Use SVG.

Most of the times when you’re wrap­ping words and char­ac­ters in span el­e­ments you are ac­tu­ally at­tempt­ing to do let­ter­ing in HTML and CSS. There is a fine line be­tween type and let­ter­ing, and web browsers are not great at the lat­ter. SVG on the other hand is a great fit for let­ter­ing. It’ll give you ab­solute con­trol over kern­ing, track­ing, po­si­tion, gra­di­ents, mask­ing, and colour. As an added bonus, the re­sult­ing SVG file size will be smaller than load­ing sev­eral fonts.

Do you re­ally need to use web fonts for a head­line like this? Maybe SVG is a bet­ter choice.

Us­ing web fonts for let­ter­ing be­comes es­pe­cially prob­lem­atic in re­spon­sive de­sign. If you use web fonts you’ll need to ad­just the po­si­tion and size of each span at each break­point. This quickly be­comes te­dious. If you’re us­ing SVG you can eas­ily scale and switch be­tween SVG files for dif­fer­ent break­points.

An­other is­sue with us­ing web fonts for let­ter­ing is lo­cal­i­sa­tion. If you use web fonts for let­ter­ing you’ll need to ag­gres­sively sub­set your fonts to make them small enough so that they load quickly. By do­ing that you’ll also make it dif­fi­cult to trans­late your let­ter­ing in other lan­guages, which of­ten uses dif­fer­ent char­ac­ter set.

Overus­ing web fonts and ag­gres­sive sub­set­ting is not a good com­bi­na­tion. The char­ac­ters i, m, and W are not in the orig­i­nal sub­set, but are re­quired for a Ger­man trans­la­tion. You’ll need to ex­pand the sub­set for these char­ac­ters, fur­ther in­flat­ing the font file size.

Fi­nally, con­sider what hap­pens when your web fonts fail to load. Most type­faces used for let­ter­ing have no good fall back op­tions. Most “web safe” fonts do not con­tain Open­Type fea­tures like swashes and dis­cre­tionary lig­a­tures that are of­ten used for let­ter­ing. Not many of the web safe fonts are scripts, so at best your fonts will fall back to a com­pletely un­re­lated script font. In the worst case it will fall­back to a de­fault serif or sans-serif, be­cause some plat­forms (like An­droid) only come with a sans-serif, serif, and mono­space type­face.

Web fonts (and type­faces) are meant for body text and head­lines. Text that can be se­lected, copied, and re-used. Let­ter­ing is usu­ally a one-off thing for lo­gos, il­lus­tra­tions, and art. It’s per­fectly fine to do let­ter­ing in SVG. If you’re wor­ried about ac­ces­si­bil­ity (you should be!) SVG has sev­eral good ways to in­crease ac­ces­si­bil­ity.

This ar­ti­cle is part one of an on­go­ing se­ries on web font anti-pat­terns. Read the in­tro­duc­tion, part 1, part 2, part 3, and part 4.